<template>
	<view class="swiper-view">
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular" :indicator-active-color="indicatorActiveColor">
			<swiper-item v-for="swiper in swiperList" :key="swiper.sid" @tap="toSwiper(swiper)">
				<image mode="aspectFill" :src="swiper.img"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props:{
			indicatorDots: {
				type: Boolean,
				required: false,
				default: true
			},
			autoplay: {
				type: Boolean,
				required: false,
				default: true
			},
			circular: {
				type: Boolean,
				required: false,
				default: true
			},
			indicatorActiveColor: {
				type: String,
				required: false,
				default: "#ffffff"
			},
			interval: {
				type: Number,
				required: false,
				default: 3000
			},
			duration: {
				type: Number,
				required: false,
				default: 500
			},
			swiperList: Array
		},
		data() {
			return {
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.swiper-view 
		.swiper 
			width: 100%;
			height: 200upx;
			image 
				width: 100%;
				height: 200upx;
// 		.keep-out 
// 			width: 100%;
// 			height: 30upx;
// 			border-radius: 100% 100% 0 0;
// 			background-color: #ff570a;
// 			margin-top: -15upx;
// 			position: absolute;
</style>
